﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo shows sequential growth of the segments one by one in the jqxBarGauge.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbargauge.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcolorpicker.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxradiobutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollview.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
</head>
<body>
    <script>
        $(document).ready(function ()
        {
            var arrayOfValues = [0, 0, 0, 0];
            var arrayA = [20, 0, 0, 0];
            var arrayB = [20, 60, 0, 0];
            var arrayC = [20, 60, 80, 0];
            var arrayD = [20, 60, 80, 100];
            var loop = 0;

            $('#jqxbargauge').on('drawEnd', function ()
            {
                switch (loop)
                {
                    case 0:
                        $('#jqxbargauge').jqxBarGauge('val', arrayA);
                        break;
                    case 1:
                        $('#jqxbargauge').jqxBarGauge('val', arrayB);
                        break;
                    case 2:
                        $('#jqxbargauge').jqxBarGauge('val', arrayC);
                        break;
                    case 3:
                        $('#jqxbargauge').jqxBarGauge('val', arrayD);
                        break;
                    default:
                        console.log('Render time is finished.');
                        break;
                }

                loop += 1;
            });

            $('#jqxbargauge').jqxBarGauge({
                width: 650,
                height: 650,
                values: arrayOfValues,
                animationDuration: 300,
                relativeInnerRadius: 0.2,
                barSpacing: 14,
                startAngle: 180, endAngle: -180,
                colorScheme: 'scheme02',
                labels: { precision: 0, indent: 15, connectorWidth: 1 }
            });
        });
    </script>
    <div id='jqxWidget'>
        <div id='jqxbargauge' style="float: left"></div>
    </div>
</body>
</html>